<template>
	<view class="min30" :style="{ paddingBottom: 10 + 'px' , paddingTop: topHight + 'px' }">
		<!-- 头部 -->
		<view class="row align">
			<u-avatar :src="userinfo.avatar" size="60"></u-avatar>
			<view class="column minleft30">
				<view class="font700 size36" style="color: #1A242D;">
					{{ userinfo.nickname }}
				</view>
				<view class="font500 size28 mintop10" style="color: #1A242D;">
					{{ userinfo.mobile }}
				</view>
			</view>
		</view>
		<!-- 头部 -->
		<!-- 功能 -->
		<view class="row mintop30" style="height: 120rpx;">
			<view class="disflex" style="width: 48%;" @click="$jump.nav('/mypackage/my_buy')">
				<image src="@/static/index/my2.png" mode="" class="posabs zin-1" style="width: 44%;height: 120rpx;">
				</image>
				<view class="column minauto minright30 size28 font500 col0 center">
					<view class="">
						我的
					</view>
					<view class="">
						求购/求租
					</view>
				</view>
			</view>
			<view class="box disflex" style="width: 48%;" @click="$jump.nav('/mypackage/my_sell')">
				<image src="@/static/index/my1.png" mode="" class="posabs zin-1" style="width: 44%;height: 120rpx;">
				</image>
				<view class="column minauto minright30 size28 font500 col0 center">
					<view class="">
						我的
					</view>
					<view class="">
						出售/出租
					</view>
				</view>
			</view>
		</view>
		<!-- 功能 -->
		<!-- 常用功能 -->
		<view class="rad2 pad30 mintop30 column" style="box-shadow: 0rpx 0rpx 6rpx 1rpx rgba(194,192,186,0.25);">
			<view class="size30 font700 col3">
				常用功能
			</view>
			<view class="mintop30 row align" @click="$jump.nav('/mypackage/collection')">
				<image src="@/static/index/collection.png" mode="widthFix" class="rad50" style="width: 70rpx;"></image>
				<view class="col0 size28 font500 minleft10" style="line-height: 28rpx;">
					我的收藏
				</view>
				<view class="minauto minright0">
					<u-icon name="arrow-right" color="#333333" size="14"></u-icon>
				</view>
			</view>
			<view class="mintop30 row align" @click="$jump.nav('/mypackage/contact')">
				<image src="@/static/index/contact.png" mode="widthFix" class="rad50" style="width: 70rpx;"></image>
				<view class="col0 size28 font500 minleft10" style="line-height: 28rpx;">
					联系过的
				</view>
				<view class="minauto minright0">
					<u-icon name="arrow-right" color="#333333" size="14"></u-icon>
				</view>
			</view>
			<view class="mintop30 row align" @click="$jump.nav('/mypackage/modify')">
				<image src="@/static/index/modify.png" mode="widthFix" class="rad50" style="width: 70rpx;"></image>
				<view class="col0 size28 font500 minleft10" style="line-height: 28rpx;">
					修改资料
				</view>
				<view class="minauto minright0">
					<u-icon name="arrow-right" color="#333333" size="14"></u-icon>
				</view>
			</view>
			<view class="mintop30 row align" @click="$jump.nav('/mypackage/Real')">
				<image src="@/static/index/55.png" mode="widthFix" class="rad50" style="width: 70rpx;"></image>
				<view class="col0 size28 font500 minleft10" style="line-height: 28rpx;">
					实名认证
				</view>
				<view class="minauto minright0">
					<u-icon name="arrow-right" color="#333333" size="14"></u-icon>
				</view>
			</view>
			<view class="mintop30 row align" @click="callPhone">
				<image src="@/static/index/official.png" mode="widthFix" class="rad50" style="width: 70rpx;"></image>
				<view class="col0 size28 font500 minleft10" style="line-height: 28rpx;">
					联系官方
				</view>
				<view class="minauto minright0">
					<u-icon name="arrow-right" color="#333333" size="14"></u-icon>
				</view>
			</view>
		</view>
		
		<view class="min30 row align">
			<u-button type="primary" class="doyi" text="退出登录" @click="logout"></u-button>
		</view>
		<!-- 常用功能 -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				topHight: '',
				bottomHighr: '',
				user_id: '',
				Phone: '',
				userinfo: []

			}
		},
		onLoad() {
			let app = uni.getSystemInfoSync()
			this.topHight = app.statusBarHeight + 42
			// #ifdef MP-TOUTIAO
			this.topHight = 5
			// #endif
		},
		onShow() {
			//当前页面展示的时候他就执行该生命周期
			this.user_id = uni.getStorageSync('user_id');
			if (this.user_id) {
				//如果存在token
				this.getUserInfo()
				this.getService()
				//按正常逻辑来讲 登录成功 我们是不是需要向服务器获取用户的信息？
				//那么我们一起来获取用户信息
			} else {
				this.$com.toast('您还未登录，正在前往登录')
				var _this = this
				setTimeout(() => {
					_this.$jump.nav('/mypackage/sign')
				}, 1000)
			}
		},
		methods: {
			async getService() {
				let {
					code,
					msg,
					data
				} = await this.$com.fetchGet("AppletUser/Customer", {
					type: 2
				})
				if (code == 1) {
					this.Phone = data.phone
				} else {
					console.log(msg);
				}
			},
			async getUserInfo() {
				let {
					code,
					msg,
					data
				} = await this.$com.fetchGet("AppletUser/GetUserInfo", {
					id: this.user_id,
				})
				if (code == 1) {
					this.userinfo = data
				} else {
					console.log(msg);
				}
			},
			logout() {
				uni.removeStorageSync('user_id');
				uni.showToast({
					title: '退出成功',
					icon: 'none'
				});
				setTimeout(function() {
					uni.switchTab({
						url: '/pages/index/index'
					});
				}, 1000);
			
			},
			callPhone() {
				uni.makePhoneCall({
					phoneNumber: this.Phone,
					success(res) {
						console.log(res);
					},
					fail(err) {
						console.log(err);
					}
				})
			},
		}
	}
</script>

<style>
	page {
		background: linear-gradient(180deg, #FFF4D3 10%, #FFFFFF 30%);
		background-repeat: no-repeat;
	}
</style>

<style scoped lang="less">
	.box {
		&:nth-child(2n) {
			margin-left: 26rpx;
		}
	}
	.doyi {
		width: 100%;
	}
</style>